<template>
    <div class="banner">
        <img :src="bannerImg" alt="">
        <div class="bannerInfo">
            <div class="infoText">
                {{sightName}}
            </div>
            <div class="infoImg">
                <i class="iconfont">&#xe628;</i>
                <span>26</span>
            </div>
        </div>
    </div>
</template>

<style scoped>
.banner{
    width: 100%;
    position: relative;
}
.banner img{
    width: 100%;
}
.bannerInfo{
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    padding: .2rem;
    display: flex;
}
.infoText{
    flex: 1;
}
.infoImg{
    width: 1rem;
    text-align: right;
}
</style>

<script>
export default {
    props:['sightName','bannerImg'],
    data(){
        return{
            title:"banner"
        }
    }
}
</script>
